<template>
  <div class="search glbFlex">
    <div class="left">
      <i class="iconfont icon-caidan" style="font-size:30px"></i>
    </div>
    <div class="center glbFlex1" @click='goPath'>
      <div class="center-left">
        <h3 style="color:red">JD</h3>
      </div>
      <div class="center-search">
        <i class="iconfont icon-sousuo"></i>
      </div>
      |
      <!-- msg 后端返回的动态数据 -->
      <div class="center-right">{{msg}}</div>
    </div>
    <div class="right" @click='goCart'>登录</div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            msg:'自然堂'
        }
    },
    methods:{
      goPath(){
        this.$router.push(`/search?msg=${this.msg}`)
      },
      goCart(){
        this.$router.push('/cart')
      }
    }
};
</script>

<style scoped lang='scss'>
.search {
  width: 100%;
  height: 200px;
  background: red;
  color: white;
  .left {
    width: 150px;
    
  }
  .right {
    width: 150px;
  }
  .center {
    padding: 10px;
    width: 1000px;
    height: 160px;
    border-radius: 50px;
    color: #ccc;
    background: white;
    .center-left h3,.center-search,.center-right{
        margin-left: 40px;
    }
    
  }
}
</style>